import Configer from "../../../script/frame/apiModel/config/Configer";
import {ThreeChooseOneModel} from "../model/GuiModel";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {ColorStr} from "../../../script/type/Type";
import ThreeChooseOneRoot from "../component/ThreeChooseOneRoot";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";

export default class ThreeChooseOneAchBar extends ThreeChooseOneRoot {

    getContentStyle = () => {
        const backSize = { h: 0.44, w: (0.18 + 0.01) * 3 + 0.001 };
        const backPos = { x: 0.22, y: 0.21 }
        return { width: backSize.w, height: backSize.h, top: backPos.y, left: backPos.x }
    }

    createElement = (model: ThreeChooseOneModel, index: number) => {
        const itemSize = { h: 0.44, w: 0.18 }
        const fontSize = Configer.getUIConfig(UIConfigKey.fontSize) as number;
        const lvSize = { h: fontSize, w: fontSize };
        const iconSize = { h: 0.06, w: 0.03750 };

        const backgroundImage = model?.Art ? model?.Art : '';
        let achName: string = model.name;
        const textSize = { h: fontSize, w: itemSize.w };
        achName = CodeUtil.getColorStr(ColorStr.white, achName)

        const des = model.descript;
        const desSize = { h: fontSize * 4, w: itemSize.w - 0.02500 };

        const boardPath = Configer.getResource(ResourceKey.chooseTalentBoard);

        let backlit = '';
        if (this.state.selectIndex === index) {
            backlit = Configer.getResource(ResourceKey.chooseTalentBacklit)
        }

        const modelMarginL = (itemSize.w) / 2 - iconSize.w / 2

        return <View   key={`${GuiKeys.threeChooseOneAchBarItem}|${index}`} style={{ backgroundImage: boardPath, width: itemSize.w, height: itemSize.h, border: backlit, borderWeight: 0.0005, marginL: 0.01 }}>
            <View   key={`${GuiKeys.threeChooseOneAchBarItemIcon}|${index}`} style={{ backgroundImage, width: iconSize.w, height: iconSize.h, marginT: 0.105, marginL: modelMarginL }}></View>
            {/*<View   key={`${GuiKeys.threeChooseOneAchBarItemLv}|${index}`} style={{ float: true, fontSize: 0.01, width: iconSize.w, height: lvSize.h, marginT: 0.06308, marginL: modelMarginL, fontAlign: TextAlign.center }}>1</View>*/}
            <View   key={`${GuiKeys.threeChooseOneAchBarItemName}|${index}`} style={{ fontSize: 0.015, width: textSize.w, height: textSize.h, marginT: 0.02, fontAlign: TextAlign.center }}>{achName}</View>
            <View   key={`${GuiKeys.threeChooseOneAchBarItemDes}|${index}`} style={{ fontSize: 0.015, width: desSize.w, height: desSize.h, marginT: 0.02, marginL: 0.01250, color: ColorStr.black, paddingL: 0.02 }}>{des}</View>
            <View   onMouseDown={() => { return this.chooseAch(model.id, model.reward); }} onMouseEnter={() => { this.onSelect(index) }} onMouseLeave={() => { this.onSelect(-1) } } key={`${GuiKeys.threeChooseOneAchBarItemEventFlog}|${index}`} style={{ float: true, width: itemSize.w, height: itemSize.h }}></View>
        </View>
    }
    chooseAch = (achId: string, reward: string) => {
        // this.toNextTask();
        const syncData: UISyncData = { id: SyncId.chooseAch, param: { achId: achId, reward: reward } };
        return syncData;
    }
}